<template>
  <div class="rightbody">

    <div class="tabheader2">
      <ul>
        <li :class="{'active':nav_top_btn == 0}" @click="checkNva(0)">按钮</li>
        <li :class="{'active':nav_top_btn == 1}" @click="checkNva(1)">动画</li>
      </ul>
    </div>


    <div class="texttabs1" v-show="nav_top_btn == 0">
      <ul>
        <li>
          <label style="width:70px;">按钮名称</label>
          <Input style="width:210px;"></Input>
        </li>
        <li>
          <label style="width:70px;">网址链接</label>
          <Input style="width:210px;"></Input>
        </li>
        <li>
          <div class="item clearfix">
            <label>颜色</label>
            <div class="colortab2 clearfix">
              <template v-for="(item,index) in borderColorList">
                <a :style="setAstyle(index)" @click="changeBorderColor(index)"
                   :class="{'active':borderListIndex == index}"></a>
              </template>
              <a class="nocolor" :class="{'active':borderListIndex == -2}" @click="changeBorderColor2"></a>
              <p class="colorpicker" :class="{'active':borderListIndex == -3}">
                <el-color-picker v-model="color1" @change="changeBorderColor3"></el-color-picker>
              </p>
            </div>
          </div>
        </li>
        <li>
          <div class="slideblock">
            <label>透明</label>
            <Slider :max="100" :min="0" @on-input="OpacityChange" v-model="opacity" style="float:left;width:230px"
                    :tip-format="hideFormat" show-input></Slider>
          </div>
        </li>
        <li>
          <div class="slideblock">
            <label>旋转</label>
            <Slider :max="360" :min="0" v-model="rotateDeg" @on-input="rotateDegChange" style="float:left;width:230px"
                    :tip-format="hideFormat" show-input></Slider>
          </div>
        </li>
        <li>
          <div class="numberblock">
            <label>大小</label>
            <div class="inputwidth">
              <span>宽</span>
              <Input-number :max="1000" :min="1" v-model="widthValue" style="width:80px;margin-right:20px;"
                            @on-change="widthValueChange"></Input-number>
            </div>
            <div class="inputheight">
              <span>高</span>
              <Input-number :max="1000" :min="1" v-model="heightValue" style="width:80px;"
                            @on-change="heightValueChange"></Input-number>
            </div>
          </div>
        </li>
        <Collapse v-if="userInfo.is_designer==1">
          <Panel name="1">&nbsp;&nbsp;边框样式
            <div class="collapse" slot="content">
              <div class="item">
                <label>样式</label>
                <Select v-model="borderStyle" style="width:225px" @on-change="borderStyleChange">
                  <Option v-for="item in options3" :value="item.value" :key="item">{{ item.label }}</Option>
                </Select>
              </div>
              <div class="item clearfix">
                <label>颜色</label>
                <div class="colortab2 clearfix">
                  <template v-for="(item,index) in borderColorList">
                    <a :style="setAstyle(index)" @click="changeBorderColor(index)"
                       :class="{'active':borderListIndex == index}"></a>
                  </template>
                  <a class="nocolor" :class="{'active':borderListIndex == -2}" @click="changeBorderColor2"></a>
                  <p class="colorpicker" :class="{'active':borderListIndex == -3}">
                    <el-color-picker v-model="color1" @change="changeBorderColor3"></el-color-picker>
                  </p>
                </div>
              </div>
              <div class="item">
                <div class="slideblock">
                  <label>粗细</label>
                  <Slider :max="20" v-model="borderWidth" @on-input="borderWidthChange" style="float:left;width:230px"
                          :tip-format="hideFormat" show-input></Slider>
                </div>
              </div>
              <div class="item">
                <div class="slideblock">
                  <label>圆角</label>
                  <Slider v-model="borderRadius" style="float:left;width:230px" :tip-format="hideFormat"
                          @on-input="borderRadiusChange" show-input></Slider>
                </div>
              </div>
            </div>
          </Panel>
        </Collapse>
        <!--<Collapse>
          <Panel name="1">&nbsp;&nbsp;阴影样式
            <div class="collapse" slot="content">
              <div class="item">
                <div class="slideblock">
                  <label>大小</label>
                  <Slider v-model="borderShadow" style="float:left;width:230px" :tip-format="hideFormat" @on-input="borderShadowChange" show-input></Slider>
                </div>
              </div>
              <div class="item clearfix">
                <label>颜色</label>
                <div class="colortab2 clearfix">
                  <template v-for="(item,index) in borderColorList" >
                        <a :style="setAstyle(index)" @click="changeBorderShadowColor(index)" :class="{'active':borderShadowColorIndex == index}"></a>
                  </template>
                  <a class="nocolor" :class="{'active':borderShadowColorIndex == -2}" @click="changeBorderShadowColor2"></a>
                  <p class="colorpicker" :class="{'active':borderShadowColorIndex == -3}">
                    <el-color-picker v-model="color2" @change="changeBorderShadowColor3"></el-color-picker>
                  </p>
                </div>
              </div>
            </div>
          </Panel>
        </Collapse>-->
      </ul>
    </div>

    <div class="texttabs2" v-show="nav_top_btn == 1">
      <div class="animbtn">
        <a class="addanimbtn" @click="addAni">添加动画</a>
        <a class="previewanimbtn" @click="reviewAni">预览动画</a>
      </div>
      <div class="animcollapse" v-if="anim.length">
        <Collapse @on-change="panelChange" :accordion="true">
          <Panel v-for="(aniObj,index) in JSON.parse(anim)" style="background:#fff;position:relative;">动画{{index + 1}}
            <div class="collapse" slot="content">
              <Select v-model="aniObj.type" @on-change="aniTypeChange" style="margin-bottom: 15px;">
                <Option v-for="item in animationList" :value="item.value" :key="item">{{ item.label }}</Option>
              </Select>
              <div class="numberblock">
                <div class="inputtime">
                  <span>时间</span>
                  <Input-number :max="20" :min="0" v-model="aniObj.duration" style="width:80px;margin-right:10px;"
                                @on-change="aniDurationChange"></Input-number>
                </div>
                <div class="inputdelay">
                  <span>延迟</span>
                  <Input-number :max="20" :min="0" v-model="aniObj.delay" style="width:80px;"
                                @on-change="aniDelayChange"></Input-number>
                </div>
              </div>
              <div class="numberblock">
                <div class="inputcount">
                  <span>次数</span>
                  <Input-number :max="10" :min="0" :disabled="aniObj.count == -1"
                                v-model="aniObj.count == -1 ? '': aniObj.count" style="width:80px;margin-right:20px;"
                                @on-change="aniCountChange"></Input-number>
                </div>
                <div>
                  <Checkbox style="font-size:14px;width:80px;" @on-change="aniCountChange1">
                    <span>循环</span>
                  </Checkbox>
                </div>
              </div>
            </div>
            <a class="delanimbtn" @click="delAni(index)"></a>

          </Panel>
        </Collapse>
        <!-- </template> -->
      </div>
    </div>
  </div>
</template>


<script>
  import {mapActions, mapGetters} from 'vuex'
  export default {
    computed: {
      ...mapGetters([
        "checkedItemData",
        "userInfo"
      ]),

    },
    data() {
      return {
        color1: null,
        color2: null,
        widthValue: 0,
        heightValue: 0,
        borderShadow: 0,
        BorderShadowColor: "",
        borderListIndex: -1,
        borderShadowColorIndex: -1,
        BgColorList: ["#1abd9b", "#fff", "#45d1d7", "#4b5eb2", "#eeea00", "#f55b2e", "#d92940", "#000"],
        borderColorList: ["#1abd9b", "#fff", "#45d1d7", "#4b5eb2", "#eeea00", "#f55b2e", "#d92940", "#000"],
        copyCss: {},
        nav_top_btn: 0,
        options3: [{
          value: 'none',
          label: '无'
        }, {
          value: 'dotted',
          label: '点'
        }, {
          value: 'solid',
          label: '实线'
        }, {
          value: 'dashed',
          label: '虚线'
        }],
        options4: [{
          value: 'linktype1',
          label: '页面'
        }, {
          value: 'linktype2',
          label: '网址'
        }],
        options6: [{
          value: 'enteranim1',
          label: '飞入1'
        }, {
          value: 'enteranim2',
          label: '飞入2'
        }],
        animationList: [{
          value: 'none',
          label: '无效果'
        }, {
          value: 'fadeInNormal',
          label: '淡入'
        }, {
          value: 'rotateInDownLeft',
          label: '从左滚入'
        }, {
          value: 'rotateInDownRight',
          label: '从右滚入'
        }, {
          value: 'zoomIn',
          label: '放大'
        }, {
          value: 'zoomInDown',
          label: '下落放大'
        }, {
          value: 'fadeIn',
          label: '弹性放大'
        }, {
          value: 'expandOpen',
          label: '弹性缩小'
        }, {
          value: 'fadeInLeft',
          label: '从右飞入'
        }, {
          value: 'fadeInRight',
          label: '从左飞入'
        }, {
          value: 'fadeInUp',
          label: '向上飞入'
        }, {
          value: 'fadeInDown',
          label: '向下飞入'
        }, {
          value: 'rotateIn',
          label: '旋转出现'
        }, {
          value: 'flipInY',
          label: '左右翻转'
        }, {
          value: 'flipInX',
          label: '上下翻转'
        }, {
          value: 'lightSpeedIn',
          label: '刹车'
        }, {
          value: 'slideRight',
          label: '从右滑入'
        }, {
          value: 'slideLeft',
          label: '从左滑入'
        }, {
          value: 'slideUp',
          label: '向上滑入'
        }, {
          value: 'slideDown',
          label: '向下滑入'
        }, {
          value: 'stretchRight',
          label: '从右展开'
        }, {
          value: 'stretchLeft',
          label: '从左展开'
        }, {
          value: 'pullUp',
          label: '向上展开'
        }, {
          value: 'pullDown',
          label: '向下展开'
        }
        ],
        freeFontList: [{
          value: 'xiaoluti',
          label: '小鹿体'
        }, {
          value: 'yuanhei',
          label: '源黑'
        }, {
          value: 'kaiti',
          label: '楷体'
        }, {
          value: 'fangsong',
          label: '仿宋'
        }, {
          value: 'shouxiehaibaoti',
          label: '手写海报体'
        }],
        fontWeight: "normal",
        fontStyle: "normal",
        textDecoration: "none",
        textAlign: "left",
        opacity: 0,
        borderStyle: 'none',
        borderRadius: 0,
        borderWidth: 0,
        linktype: '',
        enteranim: '进入',
        emphasizeanim: '强调',
        exitanim: '退出',
        rotateDeg: 0,

        fontSize: 0,
        options2: [],
        anim: [],
        currentAniIndex: -1,
      }
    },
    mounted(){

//      console.log(this.checkedItemData)
      this.givedata(this.checkedItemData);
    },
    watch: {

      checkedItemData: function (newCheckedItemData) {
        // debugger
        this.givedata(newCheckedItemData);
      }
    },
    methods: {
      givedata(data){
        // debugger
        this.opacity = 100 - data.out.css.opacity * 100;
        this.anim = JSON.stringify(data.anim);

        this.rotateDeg = typeof(data.out.css.transform) == "undefined" ? 0 : parseInt(data.out.css.transform.match(/\d+(\.\d+)?/g)[0]);

        this.borderStyle = typeof(data.in.css.borderStyle) == "undefined" ? "none" : data.in.css.borderStyle;
        this.borderWidth = typeof(data.in.css.borderWidth) == "undefined" ? 0 : parseInt(data.in.css.borderWidth.replace("px", ""));

        this.borderRadius = typeof(data.in.css.borderRadius) == "undefined" ? 0 : parseInt(data.in.css.borderRadius.replace("px", ""));

        this.boxShadow = typeof(data.in.css.boxShadow) == "undefined" ? 0 : parseInt(data.in.css.boxShadow.split(" ")[3].replace("px", ""));


        this.widthValue = typeof(data.in.css.width) == "undefined" ? 0 : parseInt(data.in.css.width);
        this.heightValue = typeof(data.in.css.height) == "undefined" ? 0 : parseInt(data.in.css.height);

      },
      checkNva(index) {
        switch (index) {
          case 0:
            this.nav_top_btn = 0
            break;
          case 1:
            this.nav_top_btn = 1
            break;
          case 2:
            this.nav_top_btn = 2
            break;
        }
      },
      hideFormat () {
        return null;
      },
      setAstyle(index){

// debugger
        var color = this.BgColorList[index];

        return "background: " + color;

      },
      OpacityChange(value){

        // this.opacity = value;

        // console.log(parseFloat((1 - value / 100).toFixed(2)))

        var params = {};
        params.value = value;
        params.key = "opacity";
        params.type = "out";

        this.$store.dispatch('changePicStyle', params)

      },
      rotateDegChange(value){

        this.rotateDeg = value;

//        console.log(value)
        var params = {};
        params.value = "rotateZ(" + value + "deg)";
        params.key = "transform";
        params.type = "out";

        this.$store.dispatch('changePicStyle', params)


      },
      borderStyleChange(value){

        var params = {};
        params.value = value;
        params.key = "borderStyle";
        // console.log(params.value)

        this.$store.dispatch('changePicStyle', params)
      },
      borderWidthChange(value){
        var params = {};
        params.value = value + "px";
        params.key = "borderWidth";
        // console.log(params.value)
        // debugger
        this.$store.dispatch('changePicStyle', params)

      },
      changeBorderColor(index){

        var color = this.borderColorList[index];

        this.borderListIndex = index;
        var params = {};
        params.value = color;
        params.key = "borderColor";
        this.$store.dispatch('changePicStyle', params)


      },
      changeBorderColor2(){
        this.borderListIndex = -2;

        this.clearBorderStyle();
        var params = {};
        params.value = "";
        params.key = "borderColor";

        // debugger
        this.$store.dispatch('changePicStyle', params)

      },
      clearBorderStyle(){

        var params = {};
        params.value = "none";
        params.key = "borderStyle";

        // debugger
        this.$store.dispatch('changePicStyle', params)
      },
      changeBorderColor3(value){

        var params = {};
        params.value = value;
        params.key = "borderColor";

        // debugger
        this.$store.dispatch('changePicStyle', params)

      },
      borderRadiusChange(value){
//          console.log(value)
        var params = {};
        params.value = value + "px";
        params.key = "borderRadius";
        // params.type = "out";

        // debugger
        this.$store.dispatch('changePicStyle', params)
      },
      borderShadowChange(value){
        var params = {};
        this.borderShadow = value;
        params.value = this.BorderShadowColor + " 0px 0px " + value + "px";
        params.key = "boxShadow";
        params.type = "out";
        // debugger
        this.$store.dispatch('changePicStyle', params)

      },
      changeBorderShadowColor(index){

        var color = this.borderColorList[index];
        this.BorderShadowColor = color;
        this.borderShadowColorIndex = index;

        var params = {};
        params.value = color + " 0px 0px " + this.borderShadow + "px";
        params.key = "boxShadow";
        params.type = "out";
        this.$store.dispatch('changePicStyle', params)
      },
      changeBorderShadowColor2(){
        this.borderShadowColorIndex = -2;
        this.borderListIndex = -2;
        this.BorderShadowColor = "";
        // this.clearBorderStyle();
        var params = {};
        params.value = "" + " 0px 0px " + this.borderShadow + "px";
        params.key = "boxShadow";
        params.type = "out";
        // debugger
        this.$store.dispatch('changePicStyle', params)
      },
      changeBorderShadowColor3(value){

        this.BorderShadowColor = value;
        var params = {};
        params.value = value + " 0px 0px " + this.borderShadow + "px";
        params.key = "boxShadow";
        params.type = "out";
        // debugger
        this.$store.dispatch('changePicStyle', params)
      },
      widthValueChange(value){

        var params = {};
        params.value = value;
        params.key = "width";
        // debugger
        this.$store.dispatch('changePicStyle', params)

      },
      heightValueChange(value){

        var params = {};
        params.value = value;
        params.key = "height";
        // debugger
        this.$store.dispatch('changePicStyle', params)

      },

      //添加动画
      addAni(){

        var params = {};
        params.type = "add";


        this.$store.dispatch('changeAni', params)
      },
      //删除动画
      delAni(index){

        var params = {};
        params.type = "del";
        params.index = index;

        this.$store.dispatch('changeAni', params)

      },
      //预览动画
      reviewAni(){

        // var anim = this.$store.state.workData.pages[this.$store.state.currentPage - 1].elements[this.$store.state.checkedItems[0]].anim


        this.$store.dispatch('reviewAni');


      },
      panelChange(key){

        // console.log(key);
        this.currentAniIndex = parseInt(key[0]);
        // debugger
      },
      aniTypeChange(value){

//        console.log('value' + value);
        var params = {};
        params.index = this.currentAniIndex;
        params.key = "type";
        params.value = value;
        this.$store.dispatch('changeAni', params)
      },
      aniDurationChange(value){

        // console.log('value' + value);
//      console.log('value' + value);
        var params = {};
        params.index = this.currentAniIndex;
        params.key = "duration";
        params.value = value;
        this.$store.dispatch('changeAni', params)

      },
      aniDelayChange(value){
        var params = {};
        params.index = this.currentAniIndex;
        params.key = "delay";
        params.value = value;
        this.$store.dispatch('changeAni', params)

      },
      aniCountChange(value){

        var params = {};
        params.index = this.currentAniIndex;
        params.key = "count";
        params.value = value;
        this.$store.dispatch('changeAni', params)

      },
      aniCountChange1(value){

//        console.log('value' + value);


// console.log(JSON.parse(this.anim)[this.currentAniIndex].count)
// console.log([this.currentAniIndex])
// console.log(JSON.parse(this.anim)[this.currentAniIndex].count + "dddddd")
        // debugger
        var params = {};
        params.index = this.currentAniIndex;
        params.key = "count";
        params.value = (value == true ? -1 : 1);

        // debugger
        this.$store.dispatch('changeAni', params)
      }

    }
  }
</script>


<style type="text/javascript">

</style>
